<template>
    <swiper
        :modules="modules"
        :slides-per-view="3"
        :slides-per-group="1"
        :navigation="true"
        :centered-slides="true"
        :slide-to-clicked-slide="true"
        @slideChange="changeCurrentIndex2"
        class="swiper-container"
    >
        <swiper-slide class="swiper-slide" v-for="(slide, index) in skuImageList" :key="slide.id">
            <img :src="slide.imgUrl" :class="{active: currentIndex === index}" @click="changeCurrentIndex(index)" />
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import bus from '@/libs/bus'
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Navigation} from 'swiper'
import 'swiper/swiper.min.css'
import 'swiper/css/navigation'

defineProps(['skuImageList'])

const currentIndex = ref(0)
const modules = [Navigation]

const changeCurrentIndex = (index: number) => {
    currentIndex.value = index
    //通知兄弟组件：当前的索引值为几
    bus.emit('getIndex', currentIndex.value)
}

const changeCurrentIndex2 = (index: any) => {
    currentIndex.value = index.activeIndex as number
    bus.emit('getIndex', currentIndex.value)
}
</script>

<style scoped lang="less">
.swiper-container {
    height: 56px;
    width: 412px;
    box-sizing: border-box;

    .swiper-slide {
        width: 56px;
        height: 56px;

        img {
            border: 1px solid #ccc;
            padding: 2px;
            width: 50px;
            height: 50px;
            display: block;

            &.active {
                border: 2px solid #f60;
                padding: 1px;
            }
        }
    }

    :deep(.swiper-button-next) {
        left: auto;
        right: 0;
    }

    :deep(.swiper-button-prev) {
        left: 0;
        right: auto;
    }

    :deep(.swiper-button-next),
    :deep(.swiper-button-prev) {
        box-sizing: border-box;
        width: 12px;
        height: 56px;
        background: rgb(235, 235, 235);
        border: 1px solid rgb(204, 204, 204);
        top: 0;
        margin-top: 0;

        &::after {
            font-size: 12px;
        }
    }
}
</style>
